/*
 * @Author: xiaosihan 
 * @Date: 2023-08-31 22:31:30 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-09-11 17:38:36
 */

import { fabric } from "fabric";
import { observable, toJS } from "mobx";


//  字体管理
class FontManage {

    constructor() { }

    // 加载状态
    store = observable({

        // 加载中的字体
        loadingFonts: [] as Array<string>,

        // 添加加载中的字体
        addLoadingFont(font: string) {
            this.loadingFonts = [font, ...toJS(this.loadingFonts)];
        },

        // 加载完成的字体
        loadedFonts: [] as Array<string>,

        // 添加加载完成的字体
        addLoadedFont(font: string) {
            this.loadingFonts = toJS(this.loadingFonts).filter(f => f !== font);
            this.loadedFonts = [font, ...toJS(this.loadedFonts)];
        },

        // 是否有在加载字体
        hasLoad(fontName: string) {
            return (this.loadingFonts.includes(fontName) || this.loadedFonts.includes(fontName));
        }
    });

    // 字体配置列表
    fontlist = [
        { id: "SourceHanSansCN-Regular", img: "./fonts/SourceHanSansCN-Regular.svg", url: "./fonts/SourceHanSansCN-Regular.otf" },
        { id: "SourceHanSansCN-Bold", img: "./fonts/SourceHanSansCN-Bold.svg", url: "./fonts/SourceHanSansCN-Bold.otf" },
        { id: "Arvo-Regular", img: "./fonts/Arvo-regular.svg", url: "./fonts/Arvo-Regular.ttf" },
        { id: "Arial-regular", img: "./fonts/Arial-regular.svg", url: "./fonts/Arial-regular.ttf" },
        // { id: "colortube-lwad", img: "./fonts/colortube-lwad.svg", url: "./fonts/colortube-lwad.ttf" },
        { id: "Nickainley-Normal", img: "./fonts/Nickainley-Normal.svg", url: "./fonts/Nickainley-Normal.ttf" },
        // { id: "quantumukrainelemonnormal-0wy5p", img: "./fonts/quantumukrainelemonnormal-0wy5p.svg", url: "./fonts/quantumukrainelemonnormal-0wy5p.ttf" },
        { id: "Streetwear-regular", img: "./fonts/Streetwear-regular.svg", url: "./fonts/Streetwear-regular.otf" },
        { id: "Times-New-Roman-regular", img: "./fonts/Times-New-Roman-regular.svg", url: "./fonts/Times-New-Roman-regular.ttf" },
        { id: "pangmenzhengdao", img: "./fonts/pangmenzhengdao.svg", url: "./fonts/pangmenzhengdao.ttf" },
        { id: "wenquanyi", img: "./fonts/wenquanyi.svg", url: "./fonts/wenquanyi.ttf" },
        { id: "xindixiaowanzi", img: "./fonts/xindixiaowanzi.svg", url: "./fonts/xindixiaowanzi.ttf" },
        { id: "zhankukuhei", img: "./fonts/zhankukuhei.svg", url: "./fonts/zhankukuhei.ttf" },
    ]

    // 获取字体图片
    getFontImg(id: string) {
        const fontC = this.fontlist.find(f => f.id === id);
        if (fontC) {
            return fontC.img;
        }
        return "";
    }

    // 加载字体
    async loadFont(fontIds: Array<string>) {
        this.fontlist.filter(f => fontIds.includes(f.id)).map(f => {

            if (!this.store.hasLoad(f.id)) {

                // 字体加载中的状态
                this.store.addLoadingFont(f.id);

                // 创建一个新的 FontFace 对象
                const customFont = new FontFace(f.id, `url(${f.url})`);

                // 加载字体
                customFont.load().then((font) => {
                    // 将字体添加到文档中
                    document.fonts.add(font);
                    // 字体
                    this.store.addLoadedFont(f.id);

                    // 清除缓存的错误字体宽度
                    delete fabric.charWidthsCache[f.id];
                });
            }

        });

        // 等待字体加载完成
        while (fontManage.store.loadingFonts.length) {
            await new Promise(resolve => setTimeout(resolve, 30));
        }

    }


}

const fontManage = new FontManage();

export default fontManage;
